<template>
  <div>
    <div class="inline-search-pannel">
      <div class="search-form">
        <el-form
            class="search-form"
            :model="postData"
            ref="postForm"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item label="姓" prop="firstName">
                <el-input v-model="postData.firstName" placeholder="请输入姓"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="名" prop="secondName">
                <el-input v-model="postData.secondName" placeholder="请输入名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话号码" prop="phoneNum">
                <el-input v-model="postData.phoneNum" placeholder="请输入电话号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所在地区" prop="aid">
                <el-cascader
                    v-model="postData.areaId"
                    :options="disableAreaList"
                    :props="areaDefaultProps"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="头像" prop="avatar">
                <file-upload
                    v-model="postData.avatar"
                    acceptType="image"
                    :limit="1"
                ></file-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="地址" prop="address">
                <el-input v-model="postData.address" placeholder="请输入地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="个人描述" prop="description">
                <el-input type="textarea" v-model="postData.description" placeholder="请输入个人描述"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div style="text-align: center">
      <el-button type="primary" @click="submit">修改</el-button>
    </div>
  </div>
</template>

<script>
import { getAllArea, postDialog } from '@/mixins'
import { _getDetail, _put } from './store'

export default {
  name: 'userInfoSetting',
  mixins: [postDialog, getAllArea],
  data() {
    return {
      postData: {
        firstName: '',
        secondName: '',
        avatar: '',
        description: '',
        phoneNum: '',
        address: '',
        areaId: ''
      },
      submitFunc: _put,
      detailFunc: _getDetail
    }
  },
  methods: {
    handleChange(fileList) {
      this.postData.avatar = fileList.join(',')
    },
    save() {
      this.getDetail()
    }
  },
  mounted() {
    this.getDetail()
  }
}
</script>

<style scoped>

</style>
